import React, { Component, Fragment } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  Linking,
  NativeModules,
  BackHandler
} from 'react-native';
import { SafeAreaView } from 'react-navigation';
import { px2dp, screenWidth } from '@/styles';
import { msg, XMHeader, _ } from '@/common';
import { defaultman, iconCaveatGreen, leftBack, driverLeave, GBquestion } from '@/images';
import baseConfig from '@/config/baseConfig';
import DetailBox from './detail_box';

const { fileUrl } = baseConfig;

/**
 * @modifyAuthor kanglang
 * @description 司机/货主详情页面
 * @createDate 2020/8/26
 *
 * isDriver 是否是司机详情  true 是  false 否
 */
export default class DriverDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: '',
      isDriver: false,
      data: {},
    };
  }

  handleFunc = () => {
    const { data } = this.state;
    const phone = data && (data.businessManMobile || data.mobile);
    if (!phone) return msg.emit('app:tip', { text: '联系电话无效' });
    const url = `tel:${phone}`;
    Linking.canOpenURL(url)
      .then((supported) => {
        if (!supported) {
          NativeModules.WindowModule.showWindow(
            {
              content: `您的设备不支持该功能，请手动拨打${phone}`,
              onlyRightBtn: '1',
            },
            (e) => {
            },
          );
          return;
        }
        return Linking.openURL(url);
      })
      .catch((err) => {
        msg.emit('app:tip', { text: err });
      });
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { isDriver, data } = params;
    if (data.head) {
      this.setState({
        avatar: { uri: fileUrl + data.head },
      });
    }
    this.setState({
      isDriver,
      data
    });
    if (Platform.OS == 'android') {
      BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  componentWillUnmount() {
    if (Platform.OS == 'android') {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  onBackAndroid = () => {
    msg.emit('router: back');
    return true;
  }

  headBottomIcon = (status) => {
    if (status == 2) {
      return driverLeave;
    }
    if (status == 3) {
      return GBquestion;
    }
    return iconCaveatGreen;
  }

  headBottomText = (status) => {
    if (status == 2) {
      return '请假中';
    }
    if (status == 3) {
      return '封禁中';
    }
    return '已认证';
  }

  showBanAlertView = (status) => {
    const { data } = this.state;
    const banReason = `封禁原因：${data.banReason}` ? data.banReason : '';
    const relieveTime = `解禁时间：${data.relieveTime}` ? data.relieveTime : '';
    if (status == 3) {
      msg.emit('app:messageBox', {
        isVisible: true,
        title: '司机封禁中',
        text: (<Text>
          <Text style={{ textAlign: 'left' }}>
            {'\n'}
            {banReason}
          </Text>
          <Text style={{ textAlign: 'left' }}>
            {'\n'}
            {relieveTime}
          </Text>
        </Text>),
        okText: '确定',
        okFn: () => {

        },
      });
    }
  }

  render() {
    const { isDriver, avatar, data } = this.state;
    const supplyJoinTime = data && data.joinTime || '';
    const joinTime = `${supplyJoinTime.substring(0, 4)}.${supplyJoinTime.substring(5, 7)}.${supplyJoinTime.substring(8, 10)}`;
    const { status } = data;
    return (
      <SafeAreaView style={styles.safeContainer}>
        <XMHeader
          style={styles.headerStyle}
          renderLeft={() => {
            return (
              <TouchableOpacity
                activeOpacity={0.8}
                style={{ paddingVertical: px2dp(14) }}
                onPress={this.onBackAndroid}
              >
                <Image
                  style={[styles.backImg]}
                  source={leftBack}
                  resizeMode='stretch'
                />
              </TouchableOpacity>
            );
          }}
          title={isDriver ? '司机详情' : '货主详情'}
        />
        <View style={styles.ddContainer}>
          <Image
            style={styles.avatarStyle}
            source={avatar || defaultman}
          />
          <TouchableOpacity onPress={() => { this.showBanAlertView(status); }}>
            <View style={[styles.certFlag, status == 2 || status == 3 ? { backgroundColor: '#F5F5F5' } : {}]}>
              <Image
                style={styles.certIcon}
                source={this.headBottomIcon(status)}
              />
              <Text style={[styles.certTip, status == 2 || status == 3 ? { color: '#999896' } : {}]}>{this.headBottomText(status)}</Text>
            </View>
          </TouchableOpacity>
          <Text style={styles.driverName}>{data && data.name}</Text>
          <Text style={styles.driverPhone}>{data && (data.businessManMobile || data.mobile)}</Text>
          <View style={styles.innerWrap}>
            <Text style={styles.innerTip}>入驻时间：</Text>
            <Text style={styles.innerTime}>{joinTime}</Text>
          </View>
        </View>
        <View style={styles.partTwo}>
          {
            isDriver ?
              <>
                <DetailBox
                  style={styles.mr24}
                  boxValue={data && data.driverAge ? data.driverAge : 0}
                  boxTip='驾龄(年)'
                />
                <DetailBox
                  boxValue={data && data.waybillCount}
                  boxTip='运单量(单)'
                />
              </> :
              <DetailBox
                style={{ width: px2dp(327) * 2 }}
                boxValue={data && data.waybillCount}
                boxTip='运单量(单)'
              />
          }

        </View>
        <View style={styles.btnWrap}>
          <TouchableOpacity
            style={styles.btnStyle}
            onPress={this.handleFunc}
          >
            <Text style={styles.btnText}>{isDriver ? '联系司机' : '联系货主'}</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  safeContainer: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  ddContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: px2dp(36) * 2,
    paddingBottom: px2dp(28) * 2,
    borderBottomLeftRadius: px2dp(12) * 2,
    borderBottomRightRadius: px2dp(12) * 2
  },
  headWrap: {
    // width: "100%",
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarStyle: {
    width: px2dp(112) * 2,
    height: px2dp(112) * 2,
    borderRadius: px2dp(112) * 2
  },
  certFlag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#E9F8E9',
    paddingLeft: px2dp(8) * 2,
    paddingTop: px2dp(5),
    paddingRight: px2dp(8) * 2,
    paddingBottom: px2dp(5),
    borderRadius: px2dp(14) * 2,
    top: -10
  },
  certIcon: {
    width: px2dp(11) * 2,
    height: px2dp(11) * 2
  },
  certTip: {
    color: '#2CBD26',
    fontSize: px2dp(11) * 2,
    marginLeft: px2dp(4) * 2
  },
  driverName: {
    color: '#343332',
    fontSize: px2dp(20) * 2,
    marginTop: px2dp(18) * 2
  },
  driverPhone: {
    color: '#999896',
    fontSize: px2dp(14) * 2,
    marginTop: px2dp(4) * 2
  },
  innerWrap: {
    backgroundColor: '#F5F5F5',
    width: px2dp(190) * 2,
    height: px2dp(37) * 2,
    borderRadius: px2dp(8) * 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px2dp(28) * 2
  },
  innerTip: {
    color: '#999896',
    fontSize: px2dp(14) * 2
  },
  innerTime: {
    color: '#343332',
    fontSize: px2dp(14) * 2
  },
  partTwo: {
    marginTop: px2dp(24) * 2,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  mr24: {
    marginRight: px2dp(24) * 2
  },
  twoLeftBox: {
    width: px2dp(155) * 2,
    height: px2dp(282),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(12) * 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  twoRightBox: {
    width: px2dp(155) * 2,
    height: px2dp(282),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(12) * 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  linearStyle: {
    width: px2dp(16) * 2,
    height: px2dp(2) * 2,
    borderRadius: px2dp(2),
    marginTop: px2dp(12) * 2,
    marginBottom: px2dp(12) * 2
  },
  numStyle: {
    color: '#343332',
    fontSize: px2dp(28) * 2
  },
  tipStyle: {
    color: '#999896',
    fontSize: px2dp(14) * 2
  },
  btnWrap: {
    width: '100%',
    height: px2dp(48) * 2,
    position: 'absolute',
    bottom: px2dp(40) * 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnStyle: {
    width: screenWidth - px2dp(35) * 2,
    height: '100%',
    backgroundColor: '#BA914A',
    paddingLeft: px2dp(35),
    paddingRight: px2dp(35),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(6) * 2,
  },
  btnText: {
    color: '#FFFFFF',
    fontSize: px2dp(16) * 2
  },
  backImg: {
    width: px2dp(36),
    height: px2dp(36),
    marginLeft: px2dp(24),
  },
});
